import React from 'react';
import {
  Row,
  Col,
  Alert,
  Icon,
  Popconfirm,
  Card,
  Button,
  Table,
  Form,
  Select,
  Modal,
  Divider,
} from 'antd';
import ApiTubro from './components/Engineering/ApiTubro';
import SearchControl from './components/Engineering/SearchControl';
import ETable from './components/Engineering/ETable';
import Utils from './components/Engineering/utils';

import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { connect } from 'dva';
import searchData from './search.data';
import axios from './components/Engineering/axios';

const FormItem = Form.Item;

@connect(({ loading, searchList }: any) => ({
  searchList,
  loading: loading.models.rule,
}))
export default class trailerTransport extends React.Component {
  state = {
    transportDefaultType: 'trailerTransport', //运输类型默认值
    searchFieldList: [
      {
        type: 'SELECT',
        label: '运输类型',
        field: 'transportType',
        placeholder: '请输入运输类型',
        initialValue: 'trailerTransport',
        list: [
          { value: 'airTransport', name: '空运' },
          { value: 'seaTransport', name: '海运' },
          {
            value: 'trailerTransport',
            name: '拖车',
          },
          {
            value: 'express',
            name: '快递',
          },
          { value: 'Railway', name: '铁路' },
        ],
        onChange: e => {
          this.setState({ transportDefaultType: e });
          if (e == 'seaTransport') {
            this.props.history.push({ pathname: '/manage/logistics/sea-transport' });
          } else if (e == 'airTransport') {
            this.props.history.push({ pathname: '/manage/logistics/air-transport' });
          }
        },
      },
      {
        type: 'AUTOSELECT',
        label: '启运港',
        field: 'loadingPort',
        placeholder: '请输入启运港,系统智能匹配',
        list: [],
        onSearch: keywords =>
          this.getSiteData({
            url: `${LOGISTICS_PATH}/web/port/nameType?portType=1`,
            keywords,
            sequence: 1,
          }),
        onChange: keywords => this.setState({ keywords }),
      },
      {
        type: 'AUTOSELECT',
        label: '目的港',
        field: 'destinationPort',
        placeholder: '请输入目的港,系统智能匹配',
        list: [],
        onSearch: keywords =>
          this.getSiteData({
            url: `${LOGISTICS_PATH}/web/port/nameType?portType=1`,
            keywords,
            sequence: 2,
          }),
        onChange: keywords => this.setState({ keywords }),
      },

      {
        type: 'AUTOSELECT',
        label: '船司',
        field: 'berthingId',
        placeholder: '请输入船司,系统智能匹配',
        list: [],
        onSearch: keywords =>
          this.getSiteData({
            url: `${LOGISTICS_PATH}/api/berthingCompany/all`,
            keywords,
            sequence: 3,
          }),
        onChange: keywords => this.setState({ keywords }),
      },
    ],
  };
  page = {};
  expand = false;

  Columns = [
    {
      title: '起运港/目的港',
      dataIndex: 'changxian',
      key: 'chuanxian',
      render: (text: any, record: any) => (
        <div>
          {record.loadingEnName}({record.loadingName}) — {record.destinationEnName}(
          {record.destinationName})
        </div>
      ),
    },
    { title: '航线', dataIndex: 'airlineName', key: 'airlineName' },
    { title: '船公司', dataIndex: 'berthingName', key: 'berthingName' },
    { title: '船期', dataIndex: 'cut_off', key: 'cut_off' },
    { title: '航程', dataIndex: 'sail', key: 'sail' },
    { title: '20GP', dataIndex: 'fee20gp', key: 'fee20gp' },
    { title: '40GP', dataIndex: 'fee40gp', key: 'fee40gp' },
    { title: '40HC', dataIndex: 'fee40hq', key: 'fee40hq' },
    {
      title: '有效期',
      dataIndex: 'time',
      key: 'time',
      render: (text, record) => (
        <p>
          {record.begindate} --- {record.enddate}
        </p>
      ),
    },
    { title: '附加费用', dataIndex: 'DDU', key: 'DDU', render: () => <a>本地费</a> },
    {
      title: '操作',
      dataIndex: 'caozuo',
      key: 'caozuo',
      render: (text, record) => {
        return (
          <div>
            <a
              onClick={() => {
                this.props.history.push({
                  pathname: '/manage/logistics/trailer-online-booking',
                  query: record,
                });
              }}
            >
              <Icon type="edit" style={{ marginRight: 2 }} />
              在线订舱
            </a>
          </div>
        );
      },
    },
  ];

  componentDidMount() {
    this.getListForPage();
    this.getSiteData({
      url: `${LOGISTICS_PATH}/web/port/nameType?portType=1`,
      keywords: 'T',
      sequence: 1,
    });
    this.getSiteData({
      url: `${LOGISTICS_PATH}/web/port/nameType?portType=1`,
      keywords: 'T',
      sequence: 2,
    });
    this.getSiteData({
      url: `${LOGISTICS_PATH}/api/berthingCompany/all`,
      keywords: 'T',
      sequence: 3,
    });
  }

  getListForPage = (params: any) =>
    ApiTubro.getListForPage.bind(this)({
      // http://47.99.66.242:8093
      url: `${LOGISTICS_PATH}/api/quotation/trailer?type=1&loadingPort=14659&destinationPort=&province=44&city=4401&district=440103&street=440103001&page=1&size=10&_channelType=ajax`,
      data: this.page,
    });

  async getSiteData({ url, keywords, sequence = 1 }) {
    let res = await axios.ajax({
      url: url,
      params: { name: keywords },
    });
    let transferDeposit = [];
    res.content &&
      res.content.list.map(item =>
        transferDeposit.push({
          value: item.id,
          name: `${item.portNameEn || item.berthingNameEn}(${item.portName || item.berthingName})`,
        }),
      );
    this.state.searchFieldList[sequence].list = transferDeposit;
    this.setState({
      searchFieldList: this.state.searchFieldList,
    });
  }

  render() {
    const { content } = this.props.searchList;
    return (
      <PageHeaderWrapper title="">
        <Card>
          <SearchControl searchFieldList={this.state.searchFieldList} {...ApiTubro.mapping(this)} />

          <div className="content-wrap">
            {this.state.transportDefaultType == 'trailerTransport' && (
              <ETable
                // rowSelection="radio"
                columns={this.Columns}
                updateSelectedItem={Utils.updateSelectedItem.bind(this)}
                selectedRowKeys={this.state.selectedRowKeys}
                // dataSource={this.props.searchList.content.list}
                dataSource={this.state.pageListData}
                pagination={this.state.pagination}
              />
            )}
          </div>
        </Card>
      </PageHeaderWrapper>
    );
  }
}
